<template>
  <div>
    <div>
      <a-button
        :disabled="addFlag"
        style="margin: 20px 0"
        type="primary"
        @click="addWaybillRow"
        >新增</a-button
      >
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :scroll="{ x: 1500 }"
      >
        <!-- //物流平台 -->
        <span slot="platformName" slot-scope="text, record">
          <span v-if="!record.editFlag">
            {{ record.platformName }}
          </span>
          <a-select
           :disabled="editFlag"
            v-else
            style="width: 100%"
            :style="
              record.platformName
                ? 'border:1px solid #ccc'
                : 'border:1px solid #f00'
            "
            v-model="record.platformName"
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            @change="
              (value, option) => changePlatformName(value, option, record)
            "
          >
            <a-select-option
              v-for="(item, i) in LogisticsPlatform"
              :value="item.logisticsPlatform"
              :key="i"
              :logisticsPlatform="item.logisticsPlatform"
              :serviceName="item.serviceName"
              :sysLogisticsId="item.sysLogisticsId"
              :sysLogisticsServiceItemId="item.sysLogisticsServiceItemId"
            >
              {{ item.logisticsPlatform }}
            </a-select-option>
          </a-select>
        </span>
        <!-- //物流商 -->
        <span slot="logisticsName" slot-scope="text, record">
          <span v-if="!record.editFlag">
            {{ record.logisticsName }}
          </span>
          <a-select
           :disabled="editFlag"
            :style="
              record.logisticsName
                ? 'border:1px solid #ccc'
                : 'border:1px solid #f00'
            "
            v-else
            style="width: 100%"
            v-model="record.logisticsName"
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            @change="
              (value, option) => changeLogisticsName(value, option, record)
            "
          >
            <a-select-option
              v-for="(item, i) in logisticsArr"
              :value="item.serviceName"
              :key="i"
              :logisticsPlatform="item.logisticsPlatform"
              :serviceName="item.serviceName"
              :sysLogisticsId="item.sysLogisticsId"
              :sysLogisticsServiceItemId="item.sysLogisticsServiceItemId"
            >
              {{ item.serviceName }}
            </a-select-option>
          </a-select>
        </span>
        <span slot="domesticChargeType" slot-scope="text, record">
          <a-radio-group
            :disabled="!record.editFlag"
            v-model="record.domesticChargeType"
            name="radioGroup"
            :default-value="0"
            @change="(e) => changeDomesticChargeType(e, record)"
          >
            <a-radio :value="0">按固定收费</a-radio>
            <a-input-number
              v-model="record.domesticFixedCharge"
              style="margin-right: 5px"
              :disabled="record.domesticChargeType * 1 != 0 || !record.editFlag"
              size="small"
              :min="1"
            />
            <a-radio :value="1">按运费百分收费 </a-radio>
            <a-input-number
              v-model="record.domesticFreightPercent"
              :disabled="record.domesticChargeType * 1 != 1 || !record.editFlag"
              size="small"
              :min="1"
            />
            %
          </a-radio-group>
        </span>
        <span slot="internationalChargeType" slot-scope="text, record">
          <a-radio-group
            @change="(e) => changeInternationalChargeType(e, record)"
            :disabled="!record.editFlag"
            v-model="record.internationalChargeType"
            name="radioGroup"
            :default-value="0"
          >
            <a-radio :value="0">按固定收费</a-radio>
            <a-input-number
              v-model="record.internationalFixedCharge"
              style="margin-right: 5px"
              :disabled="
                record.internationalChargeType * 1 != 0 || !record.editFlag
              "
              size="small"
              :min="1"
            />
            <a-radio :value="1">按运费百分收费 </a-radio>
            <a-input-number
              v-model="record.internationalFreightPercent"
              :disabled="
                record.internationalChargeType * 1 != 1 || !record.editFlag
              "
              size="small"
              :min="1"
            />
            %
          </a-radio-group>
        </span>
        <span slot="action" slot-scope="text, record">
          <a
            v-if="!record.editFlag"
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="editRow(record)"
            >编辑
          </a>
          <a
            v-if="record.editFlag"
            href="javascript:;"
            style="text-decoration: underline; color: rgb(41, 41, 224)"
            @click="savaRowData(record)"
            >保存
          </a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="你确定要删除该条数据吗？"
            @confirm="delRowData(record)"
            ok-text="是的"
            cancel-text="取消"
          >
            <a
              v-if="!record.editFlag"
              href="javascript:;"
              style="text-decoration: underline; color: #f00"
              >删除
            </a>
          </a-popconfirm>

          <a
            v-if="record.editFlag"
            href="javascript:;"
            style="text-decoration: underline; color: #f00"
            @click="cancel(record)"
            >取消
          </a>
        </span>
      </a-table>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
  </div>
</template>

<script>
import { selectAllLogistics } from "@/apis/common";
import {
  para_waybillPageList,
  para_saveData,
  para_updateData,
  para_deleteData,
} from "@/apis/system/setManage/parameterize";
export default {
  created() {
    this.getTableList();
    this.getLogistics();
  },
  data() {
    return {
      tableData: [],
      searchData: {
        size: 10,
        current: 1,
      },
      total: 1,
      //物流商数组
      logisticsArr: [],
      // 物流平台
      LogisticsPlatform: [],
      addFlag: false,
      spinning: false,
      editFlag: false,
    };
  },
  methods: {
    //删除当前行
    async delRowData(record) {
      let { code } = await para_deleteData(record.id);
      if (code === "10000") {
        this.getTableList();
      }
    },
    //选择固定收费
    changeDomesticChargeType(e, record) {
      if (e.target.value == 0) {
        record.domesticFreightPercent = null;
      } else {
        record.domesticFixedCharge = null;
      }
    },
    //选择百分比收费
    changeInternationalChargeType(e, record) {
      if (e.target.value == 0) {
        record.internationalFreightPercent = null;
      } else {
        record.internationalFixedCharge = null;
      }
    },
    async savaRowData(record) {
      if ((record.platformId ?? "") == "") {
        this.$message.error("请选择平台名称！");
        return false;
      }
      if ((record.logisticsId ?? "") == "") {
        this.$message.error("请选择物流商！");
        return false;
      }
      if (record.domesticChargeType == 0) {
        if ((record.domesticFixedCharge ?? "") == "") {
          this.$message.error("请输入国内运单固定收费费用！");
          return false;
        }
      } else {
        if ((record.domesticFreightPercent ?? "") == "") {
          this.$message.error("请输入国内运单百分比运费费用！");
          return false;
        }
      }
      if (record.internationalChargeType == 0) {
        if ((record.internationalFixedCharge ?? "") == "") {
          this.$message.error("请输入国际运单固定收费费用！");
          return false;
        }
      } else {
        if ((record.internationalFreightPercent ?? "") == "") {
          this.$message.error("请输入国际运单百分比运费费用！");
          return false;
        }
      }
      if (this.editFlag) {
        let { code } = await para_updateData(record);
        if (code == "10000") {
          this.editFlag = false;
          record.editFlag = false;
          this.getTableList();
        }
      } else {
        let { code } = await para_saveData(record);
        if (code == "10000") {
          this.addFlag = false;
          record.editFlag = false;
          this.getTableList();
        }
      }
    },
    //编辑每一行
    editRow(record) {
      record.editFlag = true;
      this.editFlag = true;
    },
    //取消按钮
    cancel(record) {
      this.addFlag = false;
      if (!this.editFlag) {
        this.tableData.forEach((item, i) => {
          if (item.key === record.key) {
            this.tableData.splice(i, 1);
          }
        });
        record.editFlag = false;
      } else {
        record.editFlag = false;
      }
      this.getTableList();
    },
    //   改变平台名称
    changePlatformName(value, option, record) {
      record.platformId = option.data.attrs.sysLogisticsId;
      record.platformName = value;
    },
    //   改变物流商
    changeLogisticsName(value, option, record) {
      record.logisticsId = option.data.attrs.sysLogisticsServiceItemId;
      record.logisticsName = value;
    },
    //新增运单配置
    addWaybillRow() {
      this.tableData = [
        {
          domesticChargeType: 0,
          domesticFixedCharge: 1,
          domesticFreightPercent: null,
          internationalChargeType: 0,
          internationalFixedCharge: 1,
          internationalFreightPercent: null,
          logisticsId: null,
          logisticsName: null,
          platformId: null,
          platformName: null,
          editFlag: true,
          key: Math.random(),
        },
        ...this.tableData,
      ];
      this.editFlag = false;
      this.addFlag = true;
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      //   this.getTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      //   this.getTableList();
    },
    //获取表格
    async getTableList() {
      this.spinning = true;
      let { code, responseBody } = await para_waybillPageList(
        this.searchData.current,
        this.searchData.size
      );
      if (code == "200") {
        if (responseBody.records.length >= 1) {
          responseBody.records.forEach((item) => {
            item.editFlag = false;
            item.editFlag = false;
            item.domesticChargeType = item.domesticChargeType * 1;
            item.internationalChargeType = item.internationalChargeType * 1;
          });
        }
        this.tableData = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
      }
    },
    //获取物流商
    async getLogistics() {
      let { code, responseBody } = await selectAllLogistics();
      if (code === "200") {
        this.logisticsArr = responseBody;
        this.LogisticsPlatform = this.deWeightThree(responseBody);
      }
    },
    //数组对象去重
    deWeightThree(data) {
      let map = new Map();
      for (let item of data) {
        if (!map.has(item.logisticsPlatform)) {
          map.set(item.logisticsPlatform, item);
        }
      }
      return [...map.values()];
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  computed: {
    columns() {
      return [
        {
          title: "平台名称",
          dataIndex: "platformName",
          align: "center",
          scopedSlots: { customRender: "platformName" },
          width: "10%",
        },
        {
          title: "物流商",
          dataIndex: "logisticsName",
          align: "center",
          scopedSlots: { customRender: "logisticsName" },
          width: "10%",
        },
        {
          title: "国内运单",
          dataIndex: "domesticChargeType",
          align: "center",
          scopedSlots: { customRender: "domesticChargeType" },
          width: "30%",
        },
        {
          title: "国际运单",
          dataIndex: "internationalChargeType",
          align: "center",
          scopedSlots: { customRender: "internationalChargeType" },
          width: "30%",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "10%",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.span.ant-radio + * {
  padding: 0;
}
</style>